<!-- 模板 -->
<template>
  <div class="login">
    <div class="image">
      <img :src="logo" alt="" />
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field v-model="form.phone" :rules="rules.phone" label="CN+86" prop="phone" placeholder="请输入手机号码" />

        <van-field
          v-model="form.userPassword"
          :rules="rules.userPassword"
          type="password"
          prop="userPassword"
          placeholder="请输入密码"
        />
      </van-cell-group>
      <div class="box">
        <van-button type="primary" color="#FC011A">登录</van-button>
      </div>
      <div class="agreement">
        <div>
          登录即代表同意 <span>《用户协议》</span>和
          <span>《隐私政策》</span>
        </div>
      </div>
    </van-form>
    <div class="perhaps">
      <div class="perhaps-zix">
        <span></span>
        <p>或者</p>
        <span></span>
      </div>
    </div>
    <div class="icon">
      <div class="icon-of">
        <img src="../assets/img/login-qq.png" alt="" />
        <img src="../assets/img/login-vx.png" alt="" />
        <img src="../assets/img/login-phone.png" alt="" />
      </div>
    </div>
    <div class="register">
      <div>
        还没账号
        <span class="register-s" @click="register">点此注册</span>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../utils/request.js'
import logo from '../assets/img/login-logo.png'
export default {
  data() {
    return {
      isLoading: false,
      logo,
      rules: {
        phone: [
          {
            required: true,
            message: '请填写手机号',
          },
          { pattern: /^1[3-9]\d{9}$/, message: '非法的电话号码' },
        ],
        userPassword: [
          {
            required: true,
            message: '请填写密码',
          },
          { pattern: /^\w{6,12}$/, message: '密码数字字母下划线6-12位' },
        ],
      },
      form: {
        phone: '',
        userPassword: '',
      },
    }
  },
  methods: {
    register() {
      this.$router.push('/register')
    },
    async login() {
      let option = {
        url: 'login',
        type: 'post',
        data: {
          phone: this.form.phone,
          userPassword: this.form.userPassword,
        },
      }
      try {
        let { data: res } = await request(option)
        if (res.meta.status !== 200) {
          return
        }
        sessionStorage.setItem('login', JSON.stringify(res))
        this.$router.push('/index')
      } catch (error) {
        console.log(error)
      }
    },
    onSubmit() {
      this.login()
    },
  },
  mounted() {
    // this.login()
  },
}
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
@import url('../assets/index.css');
.van-form {
  width: 100%;
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  .van-cell-group {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .van-cell {
      background-color: #f8f8f8;
      padding: 0.2rem 0.32rem;
      font-size: 0.28rem;
      line-height: 0.48rem;
      /deep/.van-field__label {
        margin-right: 0;
        width: 5.8em;
        span {
          font-size: 0.3rem;
          width: 1.8rem;
          position: relative;
          color: #000;
          &::after {
            content: '';
            margin-left: 0.5rem;
            border-right: 0.01rem solid #999999;
          }
          &::before {
            content: '';
            position: absolute;
            display: inline-block;
            top: 0.15rem;
            left: 1.1rem;
            width: 0;
            height: 0;
            border-left: 0.09rem solid transparent;
            border-right: 0.09rem solid transparent;
            border-top: 0.09rem solid #999999;
          }
        }
      }
      /deep/.van-cell__value {
        .van-cell__value {
          .van-cell__value {
          }
        }
      }
    }
    .van-cell:nth-of-type(1) {
      margin-bottom: 0.3rem;
    }
  }
  .van-button {
    margin-top: 0.4rem;
  }
  .box {
    width: 6rem;
    /deep/.van-button {
      width: 100%;
      background-color: #e5e5e5;
      height: 0.88rem;
      font-size: 0.28rem;
      padding: 0 0.3rem;
      border: 0;
    }
  }
  .agreement {
    width: 100%;
    display: flex;
    margin-top: 0.2rem;
    justify-content: center;
    div {
      color: #999999;
      font-size: 0.26rem;
      span {
        color: #000;
      }
    }
  }
}
.perhaps {
  width: 100%;
  display: flex;
  justify-content: center;
  .perhaps-zix {
    width: 80%;
    display: flex;
    align-items: center;
    color: rgb(102, 102, 102);
    margin-top: 1rem;
    span {
      height: 0.1rem;
      width: 50%;
      border-top: 1px solid rgb(102, 102, 102);
      margin-top: 0.1rem;
    }
    p {
      width: 15%;
      text-align: center;
      font-size: 0.28rem;
    }
  }
}
.icon {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  .icon-of {
    display: flex;
    align-items: center;
    img {
      width: 0.9rem;
    }
    img:nth-of-type(2) {
      margin: 0 0.4rem;
    }
  }
}
.register {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  div {
    font-size: 0.28rem;
    color: #999999;
    .register-s {
      color: red;
    }
  }
}
//   此选择器名字是van-nav-bar组件内标签
// scoped尝试把此选择器后属性选择器匹配当前页面标签 (选不中组件内部的)
// lang="less" 当前style标签内是less语法
// 用/deep/就不会被vscode标记红线
// /deep/ 会把属性选择器加到前面 (用后代选择器的方式往里找匹配的类名)
// 结论: 要修改组件内样式, 如果你用了scoped, 就需要在选择器前/deep/即可
.van-cell--required::before {
  display: none;
}
</style>
